<template>
  <div class="Control">
    <!-- 核心指标 公告 -->
    <a-row type="flex" justify="space-between" :gutter="[24,32]">
      <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px"
          :bodyStyle="{ padding: '16px 20px 20px 25px' }"
        >
          <div class="card_title" style="margin-bottom: 29px">核心指标</div>
          <div class="header_box">
            <div class="header-info">
              <div class="title">实时服务费</div>
              <div class="datainfo">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(service.today_serviceFee)"
                  :duration="3000"
                >
                </countTo>
              </div>
              <div class="datatips">
                <span class="m_r_10">昨日此时 <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.lastday_now_serviceFee)" :duration="3000" ></countTo></span>
                <span :style="{color:parseFloat(service.last_service_than)<0?'green':'red'}">
                  <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.last_service_than *100)" :duration="3000" ></countTo>%
                  <a-icon
                    :type="parseFloat(service.last_service_than)<0?'down':'up'"
                    :style="{color:parseFloat(service.last_service_than)<0?'green':'red',fontSize: '10px'}"
                  />
                </span>
              </div>
            </div>

            <div class="header-info">
              <div class="title">昨日预估</div>
              <div class="datainfo">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(service.last_serviceFee)"
                  :duration="3000"
                >
                </countTo>
              </div>
              <div class="datatips">
                <!-- <span class="m_r_10">本月{{ service.month_serviceFee }}</span> -->
                <span class="m_r_10">本月 <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.month_serviceFee)" :duration="3000" ></countTo></span>

                <span
                  :style="{color:parseFloat(service.month_service_than)<0?'green':'red'}"
                ><countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.month_service_than *100)" :duration="3000" ></countTo>%
                  <a-icon
                    :type="parseFloat(service.month_service_than)<0?'down':'up'"
                    :style="{color:parseFloat(service.month_service_than)<0?'green':'red',fontSize: '10px'}"
                  />
                </span>
              </div>
            </div>

            <div class="header-info">
              <div class="title">上单平均服务费</div>
              <div class="datainfo">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(service.today_avg_service)"
                  :duration="3000"
                >
                </countTo>
              </div>
              <div class="datatips">
                <span class="m_r_10">昨日平均 <countTo :startVal="startVal" :decimals="0" :endVal="parseFloat(service.last_avg_service)" :duration="3000" ></countTo></span>
                <span
                  :style="{color:parseFloat(service.last_avg_service_bl)<0?'green':'red'}"
                ><countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.last_avg_service_bl *100)" :duration="3000" ></countTo>%
                  <a-icon
                    :type="parseFloat(service.last_avg_service_bl)<0?'down':'up'"
                    :style="{color:parseFloat(service.last_avg_service_bl)<0?'green':'red',fontSize: '10px'}"
                  />
                </span>
              </div>
            </div>

            <div class="header-info">
              <div class="title">被翘商品数</div>
              <div class="datainfo">
                <countTo
                  :startVal="startVal"
                  :decimals="0"
                  :endVal="parseFloat(service.today_warp_count)"
                  :duration="3000"
                >
                </countTo>
              </div>
              <div class="datatips">
                <!-- <span class="m_r_10">本月被翘{{ service.month_warp_count }}</span> -->
                <span class="m_r_10">
                  本月被翘 <countTo :startVal="startVal" :decimals="0" :endVal="parseFloat(service.month_warp_count)" :duration="3000" ></countTo>
                </span>
                <span
                  :style="{color:parseFloat(service.today_month_warp_count)<0?'green':'red'}"
                ><countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.today_month_warp_count*100)" :duration="3000" ></countTo>% <a-icon
                  type="up"
                  :style="{ fontSize: '10px', color: 'red' }"
                /></span>
              </div>
            </div>

            <div class="header-info">
              <div class="title">昨日结算</div>
              <div class="datainfo">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(service.last_cmServiceFee)"
                  :duration="3000"
                >
                </countTo>
              </div>
              <div class="datatips">
                <!-- <span class="m_r_10">本月{{ service.month_cmServiceFee }}</span> -->
                <span class="m_r_10">本月 <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.month_cmServiceFee)" :duration="3000" ></countTo></span>
                <!-- <span>上月{{ service.top_month_cmServiceFee }}</span> -->
                <span>上月 <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(service.top_month_cmServiceFee)" :duration="3000" ></countTo></span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          class="noticecard"
          style="border-radius: 8px; margin-bottom: 5px"
          :bodyStyle="{ padding: '16px 26px 19px 24px' }"
        >
          <div class="card_title" style="margin-bottom: 22px">公告</div>
          <div class="notice">
            <div
              v-for="(item, index) in noticeList"
              :key="index"
              class="flex col_center"
              style="width: 100%"
              :style="{ marginTop: index == 0 ? 0 : '7px' }"
            >
              <span class="noticetitle line-1">{{ item.title }}</span>
              <span class="noticeinfo line-1">{{ item.info }}</span>
              <span class="noticedate line-1">{{ item.date }}</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 个人数据分析 导航 -->
    <a-row type="flex" justify="space-between" :gutter="[24,32]">
      <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          class="titlecard"
          style="border-radius: 8px; margin-bottom: 5px"
          title="个人数据分析"
          :bodyStyle="{ padding: 0 }"
        >
          <div class="userdate">
            <a-row>
              <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
                <div class="user_left" style="padding: 17px 15px 26px 24px">
                  <div class="flex row_bet">
                    <div class="card_title line-1" style="margin-bottom: 12px">通过商品出单率</div>
                    <a-range-picker
                      :ranges="{
                        本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                        上周: [
                          moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                          moment().subtract(parseInt(moment().format('d')), 'days'),
                        ],
                        本月: [
                          moment().month(moment().month()).startOf('month'),
                          moment().month(moment().month()).endOf('month'),
                        ],
                        上月: [
                          moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01'),
                          moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01')
                            .subtract(-1, 'month')
                            .add(-1, 'days'),
                        ],
                        半年: [moment().startOf('day').subtract(6, 'month'), moment()],
                      }"
                      format="YYYY/MM/DD"
                      @change="issueChange"
                      style="float: right"
                    >
                      <div style="font-size: 12px; color: #96989B">
                        <a-icon type="calendar" /><span class="m_l_10 m_r_10">{{ issuestr }}</span>
                        <a-icon type="down" style="font-size: 12px" />
                      </div>
                    </a-range-picker>
                  </div>
                  <div class="left_main">
                    <div class="issuepro">
                      <span class="num">{{ (issue.issue_bl * 100).toFixed(2) }}</span
                      ><span class="font">%</span>
                    </div>
                    <div class="rank">
                      <div class="rank_top" style="margin-bottom: 15px">
                        <span>排名</span>
                        <span class="m_l_10" style="color: #707377">{{ issue.rank_bl }}</span>
                      </div>
                      <a-progress :percent="issue.issue_bl * 100" size="small" :showInfo="false" />
                    </div>
                    <a-divider style="margin: 20px 0 17px 0" />
                    <div class="card_title" style="margin-bottom: 12px">出单分类占比</div>
                    <div class="classbox">
                      <div v-for="(item, index) in issue.class" :key="index">
                        <div class="classli flex row_bet" v-if="index < 3">
                          <span>{{ item.pd_cateText }}</span>
                          <!-- <span>商品件数{{ item.count }}</span> -->
                          <span>{{ parseInt(item.bl * 100) }}%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                <!-- 中间 -->
                <div class="user_center" style="padding: 17px 24px 26px 23px">
                  <div class="flex row_bet">
                    <div class="card_title">每日排名趋势</div>
                    <a-range-picker
                      :ranges="{
                        本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                        上周: [
                          moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                          moment().subtract(parseInt(moment().format('d')), 'days'),
                        ],
                        本月: [
                          moment().month(moment().month()).startOf('month'),
                          moment().month(moment().month()).endOf('month'),
                        ],
                        上月: [
                          moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01'),
                          moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01')
                            .subtract(-1, 'month')
                            .add(-1, 'days'),
                        ],
                        半年: [moment().startOf('day').subtract(6, 'month'), moment()],
                      }"
                      format="YYYY/MM/DD"
                      @change="ranklineChange"
                      style="float: right"
                    >
                      <div style="font-size: 12px; color: #96989B">
                        <a-icon type="calendar" /><span class="m_l_10 m_r_10">{{ linetime }}</span>
                        <a-icon type="down" style="font-size: 12px" />
                      </div>
                    </a-range-picker>
                  </div>
                  <div class="center_main">
                    <div id="v-container">
                      <v-chart :forceFit="true" :height="235" :data="linedata" :padding="padding">
                        <v-axis></v-axis>
                        <v-line position="addDate*num" color="#3AA1FF"></v-line>
                      </v-chart>
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
                <!-- 右侧 -->
                <div class="user_right" style="padding: 17px 26px 21px 23px">
                  <div class="card_title" style="margin-bottom: 21px">系统分析</div>
                  <div class="right_info">
                    <div class="total">
                      <div>
                        <i class="lticon icon-order"></i>
                        <span class="m_l_10" style="font-weight: 600; color: #333">总体概括 </span>
                      </div>
                      <div class="totalinfo">
                        <div class="line-1">商品出单率优秀，商品质量高。</div>
                        <div class="line-2">上三个月整体服务费趋势上升，本月趋势比较平稳。</div>
                      </div>
                    </div>
                    <div class="attention">
                      <div>
                        <i class="lticon icon-order"></i>
                        <span class="m_l_10" style="font-weight: 600; color: #333"> 值得注意 </span>
                      </div>
                      <div class="totalinfo">
                        <div class="line-1">家具品类的商品最适合你。</div>
                        <div class="line-2">应多向适合的品类谈商品，扬长避短也许效果更好。</div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false" style="border-radius: 8px; margin-bottom: 5px" :bodyStyle="{ padding: 0 }">
          <div class="nav" style="padding: 30px 30px 28px 29px">
            <!-- flex row_bet flex_wrap -->
            <a-row justify="space-between">
              <a-col
                v-for="(item, index) in navList"
                :key="index"
                :xl="8"
                :lg="4"
                :md="4"
                :sm="6"
                :xs="6">
                <div
                  class="navbox"
                  style="cursor: pointer"
                  :class="[(index + 1) % 3 == 0 ? '' : (index + 1) % 2 == 0 ? 'mrs32' : 'mr34', index < 3 ? '' : 'mt38']"
                >
                  <router-link :to="item.path">
                    <div class="nav_icons" :class="item.icon"></div>
                    <div class="nav_name line-1">{{ item.name }}</div>
                  </router-link>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 服务费趋势 小组数据 -->
    <a-row type="flex" justify="space-between" :gutter="[24,32]">
      <a-col :xl="18" :lg="12" :md="12" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px; min-height: 441px"
          :bodyStyle="{ padding: '16px 22px 25px 25px' }"
        >
          <div class="flex row_bet">
            <span style="color: #101010; font-weight: 600">服务费趋势</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days'),
                ],
                本月: [
                  moment().month(moment().month()).startOf('month'),
                  moment().month(moment().month()).endOf('month'),
                ],
                上月: [
                  moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01'),
                  moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01')
                    .subtract(-1, 'month')
                    .add(-1, 'days'),
                ],
                半年: [moment().startOf('day').subtract(6, 'month'), moment()],
              }"
              format="YYYY/MM/DD"
              @change="servebarChange"
              style="float: right"
            >
              <div style="font-size: 12px; color: #96989B">
                <a-icon type="calendar" /><span class="m_l_10 m_r_10">{{ servebar }}</span>
                <a-icon type="down" style="font-size: 12px" />
              </div>
            </a-range-picker>
          </div>
          <bar :data="barData" title="" />
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px; min-height: 441px"
          :bodyStyle="{ padding: '16px 9px 19px 24px' }"
        >
          <div>
            <div class="flex row_bet line-1">
              <span style="color: #101010; font-weight: 600">小组数据</span>
              <a-range-picker
                :ranges="{
                  本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                  上周: [
                    moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                    moment().subtract(parseInt(moment().format('d')), 'days'),
                  ],
                  本月: [
                    moment().month(moment().month()).startOf('month'),
                    moment().month(moment().month()).endOf('month'),
                  ],
                  上月: [
                    moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01'),
                    moment(moment().subtract(1, 'month').format('YYYY-MM') + '-01')
                      .subtract(-1, 'month')
                      .add(-1, 'days'),
                  ],
                  半年: [moment().startOf('day').subtract(6, 'month'), moment()],
                }"
                format="YYYY/MM/DD"
                @change="groupdataChange"
                style="float: right"
              >
                <div style="font-size: 12px; color: #96989B">
                  <a-icon type="calendar" /><span class="m_l_10 m_r_10">{{ groupdata }}</span>
                  <a-icon type="down" style="font-size: 12px" />
                </div>
              </a-range-picker>
            </div>
            <div style="margin-top: 23px">统计 {{ sum }}</div>
            <rank-list title="" :list="rankList" style="" />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 热门案例  知识库 小组排行 -->
    <a-row type="flex" justify="space-between" :gutter="[24,32]">
      <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px; height: 339px"
          :bodyStyle="{ padding: '16px 25px 21px 24px' }"
        >
          <div class="cart flex row_bet">
            <span>热门知识库</span>
            <span class="more">更多</span>
          </div>
          <div class="knowbox">
            <div v-for="(item, index) in knowList" :key="index">
              <div class="flex row_bet cursor" style="margin-bottom: 3px" @click="godetails(item)">
                <div class="knowtitle line-1" :title="item.q">{{ item.q }}</div>
                <div style="color: #96989B;flex: 1;text-align: right" class="line-1">
                  <span class="knowinfo line-1" style="margin-right: 5px;">{{ item.a_num }}回答</span>
                  <span class="knowdate line-1">{{ item.view_num }}浏览</span>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px; height: 339px"
          :bodyStyle="{ padding: '16px 25px 23px 22px' }"
        >
          <div class="cart flex row_bet" style="margin-bottom: 24px">
            <span>热门案例</span>
            <span class="more">更多</span>
          </div>
          <div class="case">
            <swiper ref="mySwiper" :options="swiperOptions">
              <swiper-slide v-for="(item, index) in caseList" :key="index">
                <div class="casebox cursor" @click="goinfo(item.id)">
                  <img :src="item.content" alt="" srcset="" style="width: 200px; height: 223px" />
                  <div style="color: #96989B; margin-top: 19px">
                    <span class="p_r_10" style="color: #101010">{{ item.user }}</span>
                    <span class="p_r_10">{{ item.zan }}点赞</span>
                    <span class="p_r_10">{{ item.view }}浏览</span>
                  </div>
                </div>
              </swiper-slide>

              <!-- <div class="swiper-pagination" slot="pagination"></div> -->
            </swiper>
            <div class="swiper-button-prev" @click="prev" style="color: #E8E9EA"></div>
            <div class="swiper-button-next" @click="next" style="color: #E8E9EA"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px; height: 339px"
          :bodyStyle="{ padding: '16px 23px 15px 25px' }"
        >
          <div class="groupbox flex row_bet">
            <a-radio-group v-model="grouprank" @change="groupChange">
              <a-radio :value="1"> 全员排行 </a-radio>
              <a-radio :value="2"> 小组排行 </a-radio>
            </a-radio-group>
          </div>
          <div class="groupul">
            <div
              v-for="(item, index) in grouprList"
              :key="index"
              :class="
                index === 0
                  ? 'rankone flex row_around col_center lidefault'
                  : index === 1
                    ? 'ranktwo flex row_around col_center lidefault'
                    : index === 2
                      ? 'rankthree flex row_around col_center lidefault'
                      : 'flex row_around col_center lidefault'
              "
              style="margin-bottom: 7px"
            >
              <span class="rankdot">{{ index + 1 }}</span>
              <span v-if="grouprank == 1" class="ranktitle line-1">{{ item.user }}</span>
              <span v-if="grouprank == 2" class="ranktitle line-1">{{ item.group }}</span>
              <span v-if="grouprank == 1" class="rankinfo line-1">{{ item.user }}小组</span>
              <span class="rankinfo line-1">{{ item.preServiceFee }}</span>
              <span
                v-if="grouprank == 2"
                class="rankdate line-1"
              >{{ item.num }}人平均{{ item.avg_preServiceFee }}</span
              >
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import {
  getLibData,
  gettimeservice,
  getgroupserviceinfo,
  getallstaffdata,
  getgroupservicefee,
  geteverydayrank,
  getstatisticsdata,
  getproblemlist,
  getcaselist
} from '@/api/controlApi'
import countTo from 'vue-count-to'
import { RankList, Bar } from '@/components'
var linedata = [
  // {
  //   addDate: '2018/8/1',
  //   num: 4623
  // },
]
const barData = []
const rankList = []

export default {
  name: 'Control',
  components: {
    countTo,
    RankList,
    Bar
  },
  data () {
    return {
      grouprank: 1,
      startVal: 0,
      padding: [20, 20, 40, 50],
      endVal: 0,
      timer: [],
      swiperOptions: {
        slidesPerView: 3,
        slidesPerGroup: 1,
        spaceBetween: 19,
        // loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      icons: 'down',
      navList: [
        {
          icon: 'lticon icon-basketball',
          name: '我的活动',
          path: '/activity/myActivity'
        },
        {
          icon: 'lticon icon-file',
          name: '招商录入',
          path: '/attractinvest/entering'
        },
        {
          icon: 'lticon icon-kakeimg',
          name: '做营销图',
          path: '/widget/makeSpreadimg'
        },
        {
          icon: 'lticon icon-search',
          name: '佣金查询',
          path: '/widget/referCommi'
        },
        {
          icon: 'lticon icon-rank',
          name: '出单排行',
          path: '/teammanage/issueResults'
        },
        {
          icon: 'lticon icon-goods',
          name: '商品管理',
          path: '/goods/goodsList'
        },
        {
          icon: 'lticon icon-moneybi',
          name: '礼金录入',
          path: '/firstgifts/fentering'
        },
        {
          icon: 'lticon icon-caiwu2',
          name: '财务报销',
          path: '/reimbursement/finance'
        },
        {
          icon: 'lticon icon-cawu',
          name: '刷优惠券',
          path: '/widget/brushCoupon'
        }
      ],
      knowList: [],
      caseList: [],
      classList: [
        // {
        //   classname: '家具',
        //   classrate: 50
        // },
        // {
        //   classname: '家具',
        //   classrate: 50
        // },
        // {
        //   classname: '家具',
        //   classrate: 50
        // }
      ],
      grouprList: [
        // {
        //   user: '和书画',
        //   price: 2125745,
        //   num: 9
        // },
        // {
        //   user: '和书画',
        //   price: 2125745,
        //   num: 9
        // },
        // {
        //   user: '和书画',
        //   price: 2125745,
        //   num: 9
        // },
        // {
        //   user: '和书画',
        //   price: 2125745,
        //   num: 9
        // },
        // {
        //   user: '和书画',
        //   price: 2125745,
        //   num: 9
        // }
      ],
      month: new Date().getMonth() + 1 + '月',
      service: {
        today_serviceFee: '0.00', // 当前实时预估服务费，
        last_serviceFee: '0.00', // 昨日此时预估服务费
        last_service_than: 0, // 昨日预估服务费比例
        month_service_than: 0, // 本月预估服务费比例
        top_month_serviceFee: 0.01, // 本月预估与上月今日同比百分比
        today_avg_service: '0.000000', // 上单平均服务费，
        last_avg_service: '0.000000', // 昨日上单平均服务费
        today_warp_count: 0, // 当前被翘商品数
        month_warp_count: 0, // 本月被翘商品数
        top_month_warp_count: 0, // 本月与上月今日被翘数据同比百分比
        last_cmServiceFee: 0, // 昨日结算服务费比例，，
        month_cmServiceFee: 0, // 本月结算服务费比例
        top_month_cmServiceFee: 0.3, // 上月结算服务费比例；
        today_month_warp_count: 0, // 今日本月商品被翘数比例
        month_serviceFee: 0, // 本月 预估服务费
        last_avg_service_bl: 0, // 今日昨日平均服务费比例
        last_preServiceFee: '0.00' // 昨日结算
      },
      dateFormat: 'YYYY/MM/DD',
      noticeList: [
        {
          title: '升级',
          info: '招商系统2.0版本正式发布',
          date: '1天前'
        },
        {
          title: '升级',
          info: '招商系统2.0版本正式发布',
          date: '1天前'
        },
        {
          title: '升级',
          info: '招商系统2.0版本正式发布',
          date: '1天前'
        },
        {
          title: '升级',
          info: '招商系统2.0版本正式发布',
          date: '1天前'
        }
      ],
      issuestr: new Date().getMonth() + 1 + '月',
      issue: {
        issue_bl: 0,
        rank_bl: 0,
        class: []
      },
      linetime: new Date().getMonth() + 1 + '月',
      linedata,
      servebar: new Date().getMonth() + 1 + '月',
      barData,
      groupdata: new Date().getMonth() + 1 + '月',
      rankList,
      sum: 0
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  created () {
    this.getLibData()
    const starttime = moment().month(moment().month()).startOf('month').unix()
    const endtime = moment().month(moment().month()).endOf('month').unix()
    this.getstatisticsdata(starttime, endtime)
    this.geteverydayrank(starttime, endtime)
    this.gettimeservice(starttime, endtime)
    this.getgroupserviceinfo(moment().startOf('day').unix(), moment().endOf('day').unix())
    this.getproblemlist()
    this.getcaselist()
    this.getallstaffdata()
  },
  mounted () {
    // console.log('Current Swiper instance object', this.swiper)
  },
  methods: {
    moment,
    goinfo (cid) {
      this.$router.push({
        path: '/case/caseInfo',
        query: {
          id: cid
        }
      })
    },
    godetails (row) {
      this.$store.dispatch('setRowsname', row)
      this.$router.push({
        path: '/knowledgecase/index/questionDetails'
      })
    },
    // 案例
    getcaselist () {
      getcaselist({
        sort: 3
      })
        .then((res) => {
          // console.log('案例', res)
          this.caseList = res.data.data
          for (const i in this.caseList) {
            if (this.caseList[i].content.indexOf('img.letuilm.com') !== -1) {
              this.caseList[i].content = this.caseList[i].content.replace(/img.letuilm.com/g, `//img.letuilm.com`)
            }
            if (this.caseList[i].content.indexOf('public/static') !== -1) {
              this.caseList[i].content = this.caseList[i].content.replace(
                /\/public\/static/g,
                `//zsxt.letuilm.com/public/static`
              )
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 知识库
    getproblemlist () {
      getproblemlist({
        page: 1,
        pagesize: 9,
        type: 1,
        sort: 2
      })
        .then((res) => {
          // console.log('知识库', res)
          this.knowList = res.data.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 数组提取
    getArrayKey (array, key) {
      var resc = []
      if (array) {
        array.forEach(function (t) {
          resc.push(t[key])
        })
      }
      // 使用: this.getArrayKey(array, "key");
      return resc
    },
    compare (key) {
      return function (value1, value2) {
        var val1 = value1[key]
        var val2 = value2[key]
        // return val1 - val2 //升序
        return val2 - val1 // 降序
      }
    },
    // 小组排行接口
    getgroupservicefee () {
      getgroupservicefee()
        .then((res) => {
          // console.log('小组排行', res)
          this.grouprList = res.data
          //  this.grouprList = [
          //   {
          //     group: '测试',
          //     preServiceFee: '20.00',
          //     avg_preServiceFee: '10.00',
          //     num: 2
          //   }
          // ]
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 全员排行接口
    getallstaffdata () {
      getallstaffdata()
        .then((res) => {
          // console.log('全员排行', res)
          this.grouprList = res.data
          // this.grouprList = [
          //   {
          //     user: '测试',
          //     group: '测试',
          //     preServiceFee: '95.87'
          //   }
          // ]
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 通过商品出单数据接口
    getstatisticsdata (start, end) {
      getstatisticsdata({
        start: start,
        end: end
      })
        .then((res) => {
          // console.log(res)
          this.issue = res.data
          if (res.data.class.length > 0) {
            this.issue.class = res.data.class.sort(this.compare('bl'))
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 每日排名趋势接口
    geteverydayrank (start, end) {
      geteverydayrank({
        start: start,
        end: end
      })
        .then((res) => {
          // console.log('每日排名趋势接口', res)
          // this.getArrayKey(res.data, 'addDate')
          this.linedata = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 小组数据接口
    getgroupserviceinfo (start, end) {
      getgroupserviceinfo({
        start: start,
        end: end
      })
        .then((res) => {
          // console.log('00', res)
          this.sum = res.data.sum
          this.rankList = []
          const name = this.getArrayKey(res.data.data, 'user')
          const bl = this.getArrayKey(res.data.data, 'bl')
          const total = this.getArrayKey(res.data.data, 'preServiceFee')
          for (var i in name) {
            var obj = {
              name: name[i],
              bl: bl[i],
              total: total[i]
            }
            this.rankList.push(obj)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 服务费趋势获取接口
    gettimeservice (start, end) {
      gettimeservice({
        start: start,
        end: end
      })
        .then((res) => {
          // console.log('服务费趋势获取接口', res)
          this.barData = []
          const x = this.getArrayKey(res.data, 'time')
          const y = this.getArrayKey(res.data, 'preServiceFee')
          for (var i in x) {
            var obj = {
              x: x[i],
              y: parseInt(y[i])
            }
            this.barData.push(obj)
          }
          // console.log(this.barData)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    groupChange (e) {
      // console.log('radio checked', e.target.value)
      if (e.target.value === 1) {
        this.getallstaffdata()
      } else {
        this.getgroupservicefee()
      }
    },
    prev () {
      this.swiper.slidePrev()
    },
    next () {
      this.swiper.slideNext()
    },
    groupdataChange (dates, dateStrings) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      this.getgroupserviceinfo(dates[0].unix(), dates[1].unix())
      const str = dateStrings[0] + '至' + dateStrings[1]
      this.groupdata = str
    },
    servebarChange (dates, dateStrings) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      this.gettimeservice(dates[0].unix(), dates[1].unix())
      const str = dateStrings[0] + '至' + dateStrings[1]
      this.servebar = str
    },
    issueChange (dates, dateStrings) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      this.getstatisticsdata(dates[0].unix(), dates[1].unix())
      const str = moment(dateStrings[1]).format('M') + '月'
      this.issuestr = str
    },
    ranklineChange (dates, dateStrings) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      this.geteverydayrank(dates[0].unix(), dates[1].unix())
      const str = dateStrings[0] + '至' + dateStrings[1]
      this.linetime = str
    },
    getLibData () {
      getLibData()
        .then((res) => {
          // console.log(res)
          this.service = res.data.service
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.Control {
  font-family: 'SourceHanSansSCBold';

  .titlecard::v-deep {
    .ant-card-head-title {
      font-size: 14px;
      font-weight: 600;
    }
  }

  .card_title {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 600;
  }

  .header_box {
    min-height: 101px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .header-info {
      margin-top: 8px;
      .title {
        color: rgba(16, 16, 16, 0.7);
        font-size: 12px;
      }

      .datainfo {
        font-size: 28px;
        color: #101010;
        font-weight: 600;
      }

      .datatips {
        font-size: 12px;
        margin-top: 23px;
        color: #707377;
      }
    }
  }

  .notice {
    font-size: 13px;
    // height: 101px;

    .noticetitle {
      width: 37px;
      height: 22px;
      line-height: 29px;
      border-radius: 2px;
      color: #101010;
      font-size: 13px;
      text-align: center;
      background-color: #e8e9ea;
      margin-right: 10px;
    }

    .noticeinfo {
      color: #101010;
      height: 22px;
      line-height: 29px;
    }

    .noticedate {
      color: #96989b;
      float: right;
      margin-left: auto;
      height: 22px;
      line-height: 29px;
    }
  }

  //个人数据分析
  .userdate {
    height: 298px;

    .user_left {
      // width: 309px;
      height: 100%;

      .left_main {
        .issuepro {
          display: flex;
          align-items: baseline;
          color: #101010;

          .num {
            font-size: 28px;
          }

          .font {
            font-size: 14px;
          }
        }
      }
    }

    .user_center {
      height: 100%;
      border-left: 1px solid #e6e6e6;

      // width: 726px;
      .center_main {
        margin: 0 20px;
      }
    }

    .user_right {
      height: 301px;
      border-left: 1px solid #e6e6e6;

      // width: 300px;
      .right_info {
        // .total {
        // }
        .attention {
          margin-top: 20px;
        }

        .totalinfo {
          margin-left: 30px;
          color: #707377;
        }
      }
    }
  }

  .nav {
    // padding: 1rem;
    // max-height: 355px;
    .navbox {
      .nav_icons {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 45px;
        color: #babdc1;
        text-align: center;
        margin: 0 auto;
      }

      .nav_name {
        // width: 56px;
        font-size: 14px;
        color: #101010;
        text-align: center;
        margin: 0 auto;
        margin-top: 9px;
      }
    }
    // .mrs32 {
    //   margin: 0 16px;
    // }
    // .mr34 {
    //   margin: 0 17px;
    // }
    .mt38 {
      margin-top: 43px;
    }
  }

  .case {
    font-family: initial;
    padding: 0 12px;
    .casebox {
      margin: 0 auto;
      width: 195px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    /deep/.swiper-slide{
      overflow: hidden;
    }
    /deep/.swiper-button-prev{
      left: 6px;
    }
    /deep/.swiper-button-next{
      right: 6px;
    }
  }

  .groupbox {
    margin-bottom: 18px;

    /deep/.ant-radio-wrapper {
      color: #96989b;
      font-weight: 600;
    }

    /deep/.ant-radio {
      display: none;
    }

    /deep/.ant-radio-wrapper-checked {
      font-weight: 600;
      color: #101010;
    }
  }

  .groupul {
    font-family: initial;
    .lidefault {
      // width: 350px;
      height: 48px;
      line-height: 48px;
      border-radius: 10px;

      .rankdot {
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 20px;
        text-align: center;
        background-color: #e8e9ea;
      }
    }

    .rankone {
      background-color: #e8e9ea;

      .rankdot {
        background-color: #707377;
        color: #ffffff;
      }
    }

    .ranktwo {
      background-color: #f0f2f4;

      .rankdot {
        background-color: #929599;
        color: #ffffff;
      }
    }

    .rankthree {
      background-color: #fafcff;

      .rankdot {
        background-color: #b5b8bd;
        color: #ffffff;
      }
    }
  }

  .cart {
    color: #101010;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;

    .more {
      cursor: pointer;
      color: #96989b;
    }
  }
  .knowbox {
    .knowtitle {
      width: 55%;
    }
  }

  // /* 手机屏幕的字体大小 */
  // @media screen and (max-width: 768px) {
  //   .nav {
  //     height: auto;
  //     .navbox {
  //       .nav_icons {
  //         font-size: 2rem;
  //       }
  //       .nav_name {
  //         font-size: 0.75rem;
  //       }
  //     }
  //   }
  // }
  // /* 笔记本电脑的字体大小 */
  @media screen and (max-width: 1200px) {
    .nav {
      // height: auto;
      // .navbox {
      //   .nav_icons {
      //     font-size: 1.5rem;
      //   }
      //   .nav_name {
      //     font-size: 14px;
      //   }
      // }
      .mrs32 {
        margin: 0px;
      }
      .mr34 {
        margin: 0px;
      }
      .mt38 {
        margin-top: 0px;
      }
    }
  }
  // // @media screen and (min-width: 768px) and (max-width: 1024px) {
  // //   .navbox {
  // //     .nav_icons {
  // //       font-size: 1.5rem;
  // //     }
  // //     .nav_name {
  // //       font-size: 14px;
  // //     }
  // //   }
  // // }
  // /* 台式电脑显示器屏幕字体大小 */
  // @media screen and (min-width: 1200px) and (max-width: 1600px) {
  //   .navbox {
  //     padding: 0.47rem;
  //     .nav_icons {
  //       font-size: 2.3rem;
  //     }
  //     .nav_name {
  //       font-size: 0.812rem;
  //     }
  //   }
  // }
  // @media screen and (min-width: 1601px) and (max-width: 1769px) {
  //   .navbox {
  //     .nav_icons {
  //       font-size: 2.2rem;
  //     }
  //     .nav_name {
  //       font-size: 0.675rem;
  //     }
  //   }
  // }
  // @media screen and (min-width: 1770px) and (max-width: 1913px) {
  //   .navbox {
  //     .nav_icons {
  //       font-size: 2.92rem;
  //     }
  //     .nav_name {
  //       font-size: 0.675rem;
  //     }
  //   }
  // }
  // @media screen and (min-width: 1914px) {
  //   .navbox {
  //     .nav_icons {
  //       font-size: 2.8125rem;
  //     }
  //     .nav_name {
  //       font-size: 0.875rem;
  //     }
  //   }
  // }
}
</style>
